<template>
  <div>
    <div v-show="scene === 0">
      <el-card style="margin: 0 0 10px 0">
        <Catagory
          @c1Change="c1Change"
          @c2Change="c2Change"
          @c3Change="c3Change"
        ></Catagory>
      </el-card>
      <el-card>
        <el-button
          type="primary"
          icon="Plus"
          :disabled="addSpuDisabled"
          @click="addSpu"
          >添加SPU</el-button
        >
        <el-table :data="spuTableData" border style="margin: 10px 0">
          <el-table-column
            type="index"
            label="序号"
            :align="'center'"
            width="60"
          />
          <el-table-column
            prop="name"
            label="SPU名称"
            :align="'center'"
            width="180"
          />
          <el-table-column
            prop="description"
            :align="'center'"
            label="SPU描述"
            show-overflow-tooltip
          />
          <el-table-column :align="'center'" label="操作" width="300">
            <template #="scope">
              <el-button
                type="primary"
                size="small"
                icon="Plus"
                @click="addSku(scope.row)"
              ></el-button>
              <el-button
                type="warning"
                size="small"
                icon="Edit"
                @click="editSpu(scope.row)"
              ></el-button>
              <el-button
                type="info"
                size="small"
                icon="View"
                @click="showSpu"
              ></el-button>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="deleteSpu"
              ></el-button
            ></template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[3, 5, 10]"
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <div v-show="scene === 1">
      <el-card>
        <SpuForm
          ref="spuFormRef"
          @submit="submitSpuForm"
          @cancel="cancelSpuForm"
        />
      </el-card>
    </div>
    <div v-show="scene === 2">
      <el-card>
        <SkuForm
          ref="skuFormRef"
          @submit="submitSkuForm"
          @cancel="cancelSkuForm"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'
import type { SpuData } from '@/api/product/spu/type'
import { reqSpuPage } from '@/api/product/spu/index'

const scene = ref(0)
const c3Id = ref()
const addSpuDisabled = ref(true)
const spuTableData = ref<SpuData[]>([])
const pagination = ref<{
  currentPage: number
  pageSize: number
  total: number
}>({ currentPage: 1, pageSize: 3, total: 0 })

const c1Change = (value: number) => {
  spuTableData.value = []
}
const c2Change = (value: number) => {
  spuTableData.value = []
}
const refreshTable = async (pageNo: number, pageSize: number, c3Id: number) => {
  let page = (await reqSpuPage(pageNo, pageSize, c3Id)).data
  spuTableData.value = page.list
  pagination.value.total = page.total
}
const c3Change = (value: number) => {
  if (value) {
    c3Id.value = value
    addSpuDisabled.value = false
    refreshTable(
      pagination.value.currentPage,
      pagination.value.pageSize,
      c3Id.value
    )
  } else {
    addSpuDisabled.value = true
  }
}
// 通过组件实例，直接操作组件方法
let spuFormRef = ref()
let skuFormRef = ref()
const addSku = (row: SpuData) => {
  scene.value = 2
  skuFormRef.value.initSkuForm({
    attrId: c3Id.value,
    spuId: row.id,
    imageList: row.imageList,
  })
}
const addSpu = () => {
  scene.value = 1
  spuFormRef.value.initSpuForm({ attrId: c3Id.value })
}
const editSpu = (row: SpuData) => {
  scene.value = 1
  spuFormRef.value.initSpuForm(row)
}
const showSpu = () => {}
const deleteSpu = () => {}
function handleCurrentChange(pageNo: number) {
  refreshTable(
    pagination.value.currentPage,
    pagination.value.pageSize,
    c3Id.value
  )
}
function handleSizeChange(limit: number) {
  refreshTable(
    pagination.value.currentPage,
    pagination.value.pageSize,
    c3Id.value
  )
}
const submitSpuForm = () => {
  scene.value = 0
  refreshTable(
    pagination.value.currentPage,
    pagination.value.pageSize,
    c3Id.value
  )
}
const cancelSpuForm = () => {
  scene.value = 0
}
const submitSkuForm = () => {
  scene.value = 0
}
const cancelSkuForm = () => {
  scene.value = 0
}
</script>

<script lang="ts">
export default {
  name: 'Spu',
}
</script>

<style scoped></style>
